<template>
	<div class="header">
		<div class="header-left">
			焦点资讯
		</div>
		<div class="header-input"><i class="iconfont">&#xe61a;</i>输入新闻地点</div>
		<div class="header-right">城市<i class="iconfont">&#xe637;</i></div>
	</div> 
</template>

<script type="text/javascript">
export default{
  name:'HomeHeader'
}
</script>
<!-- 加scoped保证样式局部化，只对这个组件有用 -->
<style lang="stylus" scoped>
@import '../../../assets/styles/varibles.styl'
.header{
	display:flex;
	height:0.86rem;
	background:$bgColor;
	color:#fff;
	line-height:0.86rem;
	.header-left{
		line-height: 0.56rem;
	    float: left;
	    padding: 0rem 0.1rem;
	    border: 1px solid #fff;
	    height: 0.56rem;
	    margin: 0.12rem 0.15rem;
	    border-radius: 0.2rem;
	    background: #f84f4f;
	}
	.header-input{
		flex:1;
		height:0.6rem;
		background:#fff;
		margin: 0.12rem 0.12rem 0 0.12rem;
		border-radius: 0.2rem;
		color:#ccc;
		line-height:0.6rem;
		padding-left: 0.2rem;
		i{
			margin-right:0.1rem;
		}
	}
	.header-right{
		width:1.24rem;
		text-align:center;
		float:right;
	}
}
</style>